<template>
	<div id="">
		<div class="header-title">
			反馈列表
		</div>
		<!-- 表格数据 -->
		<div class="bg-white m-2 px-2 py-1">
			<a-row type="flex" justify="space-between">
				<!-- 日期 -->
				<a-col :xs="24"  :md="12" :lg="6">
					<div class="flex align-center my-1">
						<div class="searchtitle">日期：</div>
						<a-range-picker @change="onChangeData" class="w-100" separator="—"
							:placeholder="['开始时间', '结束时间']" v-model="time">
							<a-icon slot="suffixIcon" type="calendar" />
						</a-range-picker>
					</div>
				</a-col>
				<a-col :xs="24"  :md="12" :lg="6"  >
					<div class="flex align-center justify-end my-1">
						<a-button type="primary" @click="click_search()">
							查询
						</a-button>
						<a-button class="ml-2" @click="click_reset()">
							重置
						</a-button>
					</div>
				</a-col>
			</a-row>

			<div class="table my-1">
				<a-table :columns="columns" :dataSource="data" @change="pageTableChange" :pagination="pagination"
					:loading='tableLoading' rowKey="id">
				</a-table>
			</div>
		</div>
	</div>
</template>

<script>
	// 选择部门人员组件
	import ListColumnsSetter from '@/components/ListColumnsSetter'
	export default {
		inject:['layout'],
		components: {
			ListColumnsSetter
		},
		data() {
			return {
				time: [], //日期
				data: [], //表格数据
				columns: [{
						title: '编号',
						key: 'rowIndex',
						dataIndex: '',
						align: 'left',
						customRender: (t, r, index) => {
							return parseInt(index) + 1;
						}
					},
					{
						title: '姓名',
						dataIndex: 'user_name',
						align: 'left'
					},
					{
						title: '标题',
						dataIndex: 'title',
						align: 'left'
					},
					{
						title: '手机号',
						dataIndex: 'mobile',
						align: 'left'
					},
					{
						title: '内容',
						dataIndex: 'content',
						align: 'left'
					}
				], //表格列表
				pagination: {
					pageSize: 10, // 一页的数据限制
					current: 1, // 当前页
					total: 10, // 总数
					// hideOnSinglePage: true,
					pageSizeOptions:['10','20','30'],
					showTotal:(total,range)=>{
						return '总计：'+total+'条数据'
					},
					showSizeChanger:true
				}, //表格分页
				tableLoading: false, //false

			};
		},

		created() {
			this.getDayMonth();
		},
		methods: {
			//日期选择显示
			onChangeData(date, dateString) {
				this.time = dateString;
			},
			//table数据分页操作
			pageTableChange(pagination, filters, sorter) {
				this.pagination = pagination
				this.get_table();
				//切换页数重新显示内容
				this.$refs.columnsSetter.initColumns();
			},
			//查询人员
			get_table() {
				this.layout.showLoading();
				this.data = [];
				this.tableLoading = true;
				axios.post('/opinion/get_ls', {
					starttime: this.time[0], //开始时间
					endtime: this.time[1], //结束时间
					currentPage: this.pagination.current,
					pageSize: this.pagination.pageSize,
					fiter: '1', //回总数
				}).then(res => {
					this.layout.hideLoading();
					if (res.status == 200) {
						this.tableLoading = false;
						// console.log(res.data);
						this.pagination.total = res.data.data.count;
						this.data = res.data.data.data;
					} else {
						this.$message.error(res.data.data.msg);
					}
				}).catch(res => {
					this.layout.hideLoading();
					this.tableLoading = false;
					this.$message.error(res);
				});
			},
			//查询方法
			click_search() {
				this.get_table();
			},
			//重置方法
			click_reset() {
				this.pagination = {
					pageSize: 10, // 一页的数据限制
					current: 1, // 当前页
					total: 10, // 总数
					// hideOnSinglePage: true,
					pageSizeOptions:['10','20','30'],
					showTotal:(total,range)=>{
						return '总计：'+total+'条数据'
					},
					showSizeChanger:true
				}
				this.getDayMonth();
			},
			// 格式化日期格式为 xxxx-xx-xx
			getFullDate(targetDate) {
				var D, y, m, d;
				if (targetDate) {
					D = new Date(targetDate);
					y = D.getFullYear();
					m = D.getMonth() + 1;
					d = D.getDate();
				} else {
					y = fullYear;
					m = month;
					d = date;
				}
				m = m > 9 ? m : '0' + m;
				d = d > 9 ? d : '0' + d;
				return y + '-' + m + '-' + d;
			},
			// 获取本月第一天至最后一天
			getDayMonth() {
				this.time = [];
				var nowDate = new Date();
				var fullYear = nowDate.getFullYear();
				var month = nowDate.getMonth() + 1; // getMonth 方法返回 0-11，代表1-12月
				var endOfMonth = new Date(fullYear, month, 0).getDate(); // 获取本月最后一天
				var endDate = this.getFullDate(nowDate.setDate(endOfMonth)); //当月最后一天
				var startDate = this.getFullDate(nowDate.setDate(1)); //当月第一天
				this.time.push(startDate);
				this.time.push(endDate);
				this.get_table();
			}
		}
	};
</script>

<style scoped>
	.searchtitle {
		text-align: left;
		white-space: nowrap !important;
		/* width: 80px; */
		display: inline-block;
	}

	.header-title {
		padding: 0 32px;
		height: 50px;
		line-height: 50px;
		font-size: 20px;
		text-align: left;
		font-weight: bold;
		background-color: #FFFFFF;
	}

	.normol-width {
		width: 100%;
		height: 32px;
		border-radius: 5px;
		border: 1px solid #d9d9d9
	}

	.tips {
		color: #d3d3d3;
	}

	.partment-width {
		margin-left: 50px;
		width: 300px;
		height: 32px;
		border-radius: 5px;
		border: 1px solid #d9d9d9
	}

	.ant-table-thead>tr>th {
		font-weight: bold;
	}

	.circle-blue {
		color: #1677FF;
	}

	.circle-green {
		color: #52C41A;
	}

	.circle-gray {
		color: #CCCCCC;
	}

	::v-deep .ant-calendar-range-picker-separator {
		color: #CCCCCC;
	}

	>>>.ant-calendar-picker-input {
		white-space: nowrap;
	}
	::v-deep .ant-table-thead > tr > th{
		font-weight: bold !important;
	}
</style>
